<template>
	<view class="box">
		<view class="name">
			{{nickName.slice(-2)}}
		</view>
		<view class="bottom-center">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4.5">
					<view class="bg-purple-right">
						<span class="span">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						{{nickName}}
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4.5">
					<view class="bg-purple-right">
						<span class="span">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						{{deptName}}
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4.5">
					<view class="bg-purple-right">
						<span class="span">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						<span v-for="v,i in posts" :key="i">{{v.roleName}}/</span>
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4.5">
					<view class="bg-purple-right">
						<span class="span">联系电话</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						{{phonenumber}}
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 名字
				nickName: '',
				// 职务
				posts: [],
				// 部门
				deptName: '',
				// 联系电话
				phonenumber: '',
			}
		},
		methods: {
			// 过滤信息
			filterUser(user) {
				user.nickName && (this.nickName = user.nickName)
				user.dept.deptName && (this.deptName = user.dept.deptName)
				user.phonenumber && (this.phonenumber = user.phonenumber)
				this.posts = user.roles
				/* postIds.forEach(v => {
					posts.forEach(x => {
						if (v == x.postId) this.posts.push(x)
					})
				}) */
			}
		},
		onLoad(v) {
			let {
				user,
			} = uni.getStorageSync('USER_EDIT')
			user && this.filterUser(user)
		}
	}
</script>

<style lang="scss" scope>
	.bottom-center {
		position: absolute;
		top: 288rpx;
		width: 100%;
	}

	::v-deep.u-row {
		color: #303133;
		font-size: 28rpx;
		margin: 0rpx 72rpx;
		border-bottom: 0.5rpx solid #e8edf5;
		padding: 28rpx 0rpx;
		display: flex;

		.bg-purple-right {
			display: flex;
			align-items: center;
			color: #606266;
		}

		.bg-purple-left {
			text-align: left;
			font-weight: 400;
			font-size: 28rpx;
		}
	}

	.box {
		position: relative;

		.name {
			width: 148rpx;
			height: 148rpx;
			text-align: center;
			line-height: 148rpx;
			font-size: 48rpx;
			font-weight: 500;
			background-image: url(https://pc.chinaonebuild.com/images/range.png);
			background-size: 100% 100%;
			position: absolute;
			top: 80rpx;
			left: 299rpx;
			color: white;
		}
	}
</style>
